<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>小米搜索框案例</title>
    <style>
        ul {
            display: none;
            list-style: none;
            padding: 0;
            margin: 0;
            border: 1px solid black;
            width: 200px;
        }

        li {
            padding: 8px;
            background-color: white;
            cursor: pointer;
        }

        li:hover {
            background-color: gray;
        }

        .focus {
            border: 3px solid blueviolet;
            outline: none;
        }
    </style>
</head>

<body>

    <input type="text" id="666" placeholder="搜索商品...">
    <ul id="xiahua">
        <li>bro是神鹰哥</li>
        <li>bro是太阳领主</li>
        <li>bro还有跳帮</li>
        <li>bro是黑沙</li>
        <li>bro是在杀人</li>
    </ul>

    <script>
        const input = document.getElementById('666');
        const dropdown = document.getElementById('xiahua');

        input.addEventListener('focus', function () {
            dropdown.style.display = 'block';
            input.classList.add('focus');
        });

        input.addEventListener('blur', function () {
            dropdown.style.display = 'none';
            input.classList.remove('focus');
        });
    </script>

</body>

</html>